<html>
<head>
	<link type="text/css" rel="stylesheet" href="resources/style.css"></link>
	<script type="text/javascript" src="resources/jquery-1.8.1.js"></script>
	<script type="text/javascript" src="resources/jqfloat.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('header').css({
				'top' : -70
			}).delay(500).animate({
				'top' : 0
			}, 800);
			$('footer').css({
				'bottom' : -40
			}).delay(500).animate({
				'bottom' : 0
			}, 800);
			$('.cloud').each(function() {
				$(this).jqFloat({
					width : Math.floor(Math.random() * 10) * 10,
					height : 10,
					speed : Math.floor(Math.random() * 10) * 100 + 500
				});
			});
			$('#sun').jqFloat({
				width : 10,
				height : 50,
				speed : 1800
			});
			$('.butterfly').jqFloat({
				width : 400,
				height : 100,
				speed : 1500
			});
			$('#snail, #message').jqFloat('stop', {
				width : 5,
				height : 0,
				speed : 30
			});
			$('#snail, #message').hover(function() {
				$(this).jqFloat('play');
			}, function() {
				$(this).jqFloat('stop');
			});
			var clicked = false;
			$('#balloon').jqFloat('stop', {
				width : 5,
				height : 30,
				speed : 1500,
				minHeight : 300
			});
			$('#balloon').on('click', function() {
				clicked = !clicked;
				if (clicked)
					$(this).jqFloat('play');
				else
					$(this).jqFloat('stop');
			});
		});
	</script>
</head>
<body>
	<section id="wrapper">
		<div id="sky">
			<div id="cloud1" class="cloud"></div>
			<div id="cloud2" class="cloud"></div>
			<div id="cloud3" class="cloud"></div>
			<div id="cloud4" class="cloud"></div>
			<div id="sun"></div>
		</div>
		<div id="ground">
			<div id="snail"></div>
			<div id="message">No tocar!!!</div>
			<div id="fly1" class="butterfly"></div>
			<div id="fly2" class="butterfly"></div>
		</div>
		<div id="balloon"></div>
		<div id="iefix"></div>
		<div id="holder">
			<h2>
				Utilizacion de plugin <span>jq</span>Float.js
			</h2>
			<p>
				Ejemplo de efectos utilizando jQuery y plugin
				<strong><em>jqFloat</em></strong>
				en una pagina web.
			</p>
		</div>
	</section>
</body>
</html>